<template>
	<q-layout :view="displayState.view" :container="false">
		<q-header
			v-model="displayState.header.model.value"
			:reveal="displayState.header.behavior.reveal"
			:reveal-offset="displayState.header.behavior.revealOffset"
			:bordered="displayState.header.style.bordered"
			:elevated="displayState.header.style.elevated"
			class="bg-primary text-white row page-header">
			<q-toolbar>
				<q-avatar>
					<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
				</q-avatar>
				<q-toolbar-title>Quasar Framework</q-toolbar-title>
				<q-btn dense flat round icon="menu" @click="displayState.leftSide.model.value = !displayState.leftSide.model.value" />


				<a-site-navbar :data="menus" @tabSelected="tabSelected"></a-site-navbar>
				<q-btn-dropdown stretch flat label="Dropdown">
					<q-list>
						<q-item-label header>Folders</q-item-label>
						<q-item v-for="n in 3" :key="`x.${n}`" clickable v-close-popup tabindex="0">
							<q-item-section avatar>
								<q-avatar icon="folder" color="secondary" text-color="white" />
							</q-item-section>
							<q-item-section>
								<q-item-label>Photos</q-item-label>
								<q-item-label caption>February 22, 2016</q-item-label>
							</q-item-section>
							<q-item-section side>
								<q-icon name="info" />
							</q-item-section>
						</q-item>
						<q-separator inset spaced />
						<q-item-label header>Files</q-item-label>
						<q-item v-for="n in 3" :key="`y.${n}`" clickable v-close-popup tabindex="0">
							<q-item-section avatar>
								<q-avatar icon="assignment" color="primary" text-color="white" />
							</q-item-section>
							<q-item-section>
								<q-item-label>Vacation</q-item-label>
								<q-item-label caption>February 22, 2016</q-item-label>
							</q-item-section>
							<q-item-section side>
								<q-icon name="info" />
							</q-item-section>
						</q-item>
					</q-list>
				</q-btn-dropdown>
				<q-space />
				<q-btn flat round dense icon="stay_current_portrait" class="q-mr-sm" />
				<q-btn flat round dense icon="notifications_none" class="q-mr-sm" />
				<q-btn flat round dense icon="settings_applications" class="q-mr-sm" />
				<q-btn flat round dense class="q-mr-sm" :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'" @click="$q.fullscreen.toggle()" />
				<q-btn flat round dense icon="more_vert" />
			</q-toolbar>
		</q-header>

		<q-drawer
			v-model="displayState.leftSide.model.value"
			:bordered="displayState.leftSide.style.bordered"
			:elevated="displayState.leftSide.style.elevated"
			side="left"
			:mini="displayState.leftSide.behavior.mini"
			:content-class="displayState.leftSide.style.contentClass"
			class="left-side-menu">
			<q-list :dark="displayState.leftSide.style.listDark">
				<a-tree-expansion :data="leftSideMenus"></a-tree-expansion>
			</q-list>
		</q-drawer>

		<q-drawer
			v-model="displayState.rightSide.model.value"
			:bordered="displayState.rightSide.style.bordered"
			:elevated="displayState.rightSide.style.elevated"
			side="right"
		>
		</q-drawer>

		<q-page-container>
			<a-content-tabs></a-content-tabs>
			<router-view />
		</q-page-container>

		<q-footer
			v-model="displayState.footer.model.value"
			:reveal="displayState.footer.behavior.reveal"
			:bordered="displayState.footer.style.bordered"
			:elevated="displayState.footer.style.elevated"
			class="bg-grey-8 text-white">
			<q-toolbar>
				<q-toolbar-title>
					<q-avatar>
						<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
					</q-avatar>
				</q-toolbar-title>
			</q-toolbar>
		</q-footer>

	</q-layout>
</template>

<script>
	import ASiteNavbar from '../components/ASiteNavbar';

	export default {
		name: 'DefaultLayout',
		data(){
			return {
				displayState:{},
				menus:[],
				leftSideMenus:[],
			}
		},
		components:{
			ASiteNavbar
		},
		methods:{
			init(){
				this.$axios.get('../data/init.json').then(res=>{
					this.menus = res.data.menus;
				});
				this.displayState = this.display();
			},
			display(){
				this.$store.commit('Display/updateState', {view:'hhh LpR fff'});
				return this.$store.state.Display;
			},
			tabSelected(item){
				this.leftSideMenus = item.children;
			}
		},
		watch:{
			displayState:{
				handler(option, old){
					// TODO 页面大小改变时、切换菜单显示状态时，切换state 会报错 正常
					if(option !== old){
						let optionStr = JSON.stringify(option);
						this.$store.commit('Display/updateState', JSON.parse(optionStr));
					}
				},
				deep:true
			}
		},
		created() {
			this.init();
		}
	}
</script>

<style lang="stylus">
	.page-header{
		min-height:60px;
	}
	.left-side-menu{
		.q-item__section--avatar{
			min-width:auto;
		}
		.q-item__section--side{
			padding-right:10px;
		}
	}
</style>
